import React from 'react';
import { DatePicker, Button, Form, Card } from 'antd';
import moment from 'moment';
import { connect } from 'dva';

import styles from './index.less';

const namespace = 'returnRoules';
/**
 *  登录界面
 */
@connect(({ loading, returnRoules }) => ({
  rouleId: returnRoules.rouleId,
  rulesDetail: returnRoules.rulesDetail,
  //控制状态，绑定事件
  submitting: loading.effects['login/doLogin']
}))
@Form.create()
class StepSix extends React.Component {
  state = {};

  onChange = (date, dateString) => {
    console.log(date, dateString);
  };

  // 保存数据
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { rulesDetail } = this.props;
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        this.props.dispatch({
          type: `${namespace}/update`,
          payload: {
            shopsId: userInfo.shopId,
            id: rulesDetail ? rulesDetail.id : this.props.rouleId,
            startDate: values.startDate.format('YYYY-MM-DD HH:mm:ss')
            // endDate:values.startDate[1].format('YYYY-MM-DD HH:mm:ss'),
          },
          callback: () => {
            this.props.dispatch({
              type: `${namespace}/save`,
              payload: {
                showDrawer: false,
                stepCurrent: 0,
                rulesDetail: null
              }
            });
            this.props.dispatch({
              type: `${namespace}/fetch`,
              payload: {
                shopsId: userInfo.shopId
              }
            });
          }
        });
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { rulesDetail } = this.props;
    let startDate = null;
    if (rulesDetail && rulesDetail.startDate) {
      startDate = moment(rulesDetail.startDate, 'YYYY-MM-DD HH:mm:ss');
      // endDate = moment(rulesDetail.endDate, 'YYYY-MM-DD HH:mm:ss');
    }

    return (
      <div className={styles.stepSix}>
        <Form onSubmit={this.handleSubmit}>
          <Card bordered={false} style={{ width: '100%' }}>
            <Form.Item label="Please set the effective date of the return rule">
              {getFieldDecorator('startDate', {
                rules: [{ required: true, message: 'Please select startDate!' }],
                initialValue: startDate ? startDate : ''
              })(<DatePicker showTime={true} placeholder="Select Time" />)}
            </Form.Item>
          </Card>
          <Form.Item>
            <div className={styles.btnList}>
              <Button htmlType="submit" className={styles.formBtn}>
                Confirm
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default StepSix;
